<template>
  <!-- 
    popper-class="single-select-loadmore" -->
  <el-select
    style="width: 100%"
    v-if="isMounted"
    v-model="_modelValue"
    remote
    reserve-keyword
    @visible-change="handleVisibleChange"
    @change="handelChange"
    :remote-method="remoteMethod"
    filterable
    :loading="loading"
    clearable
    v-loadMore="loadMore"
    :multiple="multiple"
    :disabled="disabled"
    :placeholder="placeholder"
    :teleported="false"
  >
    <el-option
      v-for="item in optionsList"
      :key="item[optionName.value]"
      :label="item[optionName.label]"
      :value="item[optionName.value]"
    />
  </el-select>
</template>
 
<script setup>
import { onMounted, onUnmounted } from 'vue'

const { proxy } = getCurrentInstance()
const { selectLoadMoreDefault } = proxy.constants
const props = defineProps({
  options: {
    type: Array,
  },
  modelValue: {
    type: [String, Number],
  },
  optionsName: {
    type: Object,
    default: () => ({}),
  },
  total: {
    type: Number,
    default: 0,
  },
  pageSize: {
    type: Number,
    default: 0,
  },
  pageNum: {
    type: Number,
    default: 0,
  },
  getList: {
    type: Function,
  },
  placeholder: {
    type: String,
    default: '请输入/选择',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  multiple: {
    type: Boolean,
    default: false,
  },
  clearable: {
    type: Boolean,
    default: true,
  },
  // 除分页参数的其他参数
  otherParams: {
    type: Object,
    default: () => ({}),
  },
})
const emits = defineEmits(['changeData', 'update:modelValue'])
const pageSize = computed(() => props.pageSize || selectLoadMoreDefault.pageSize)
const pageNum = computed(() => props.pageNum || selectLoadMoreDefault.pageNum)
const queryParams = ref({
  pageSize: pageSize.value,
  pageNum: pageNum.value,
  name: '',
})
const visible = ref(false)
const _modelValue = ref(props.modelValue)
watch(
  () => [props.modelValue, props.total],
  val => {
    _modelValue.value = val[0]
    emits('update:modelValue', val[0])
    if (!val[1]) {
      queryParams.value.pageNum = 1
    }
  }
)
const loading = ref(false)
const isMounted = ref(false)
const optionsList = computed(() => props.options)
onMounted(() => {
  isMounted.value = true
})
onUnmounted(() => {
  isMounted.value = false
})
// 下拉选属性配置
const optionName = computed(() => {
  return {
    label: props.optionsName?.label ?? 'label',
    value: props.optionsName?.value ?? 'value',
  }
})

const handelChange = val => {
  emits('changeData', val)
  emits('update:modelValue', val)
}
const loadMore = () => {
  // debugger;
  let sum = queryParams.value.pageNum * queryParams.value.pageSize
  if (sum >= props.total) return
  visible.value && remoteMethod(queryParams.value.name, false)
}
const remoteMethod = (query, isEmpty = true) => {
  // debugger;
  if (visible.value) {
    queryParams.value.name = query
    // if (query || !isEmpty) {
    queryParams.value.pageNum = isEmpty ? 1 : queryParams.value.pageNum + 1
    // loading.value = true;
    setTimeout(() => {
      // loading.value = false;
      props.getList({ ...queryParams.value, ...props.otherParams }, isEmpty)
    }, 200)
    // }
  }
}
// 控制下拉框的显示隐藏
const handleVisibleChange = isVisible => {
  visible.value = isVisible
}

onMounted(() => {})
onUnmounted(() => {
  const domClass = '.el-select-dropdown__wrap'
  const element = el.querySelector(domClass)
  if (element.__vueCustomEvent__) {
    element.removeEventListener('scroll', element.__vueCustomEvent__)
    // 可选：删除存储的函数引用以避免内存泄漏
    delete element.__vueCustomEvent__
  }
})
</script>